<template>
  <div class="sourceManage">
    <el-form :inline="true" class="demo-form-inline" size="mini" v-model="queryForm">
      <el-form-item label="数据源名称">
        <el-input size="small" v-model="queryForm.interfaceName" placeholder="数据源名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="接口类型">
        <el-select v-model="queryForm.interfaceType" clearable placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="queryForm.status" clearable placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="queryForm.createTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchEvent">搜索</el-button>
      </el-form-item>
    </el-form>
    <znxd-list :column="column" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list>
  </div>
</template>

<script >
import {
  list
} from "@/api/dataset/interface.js";
import { getDiction, formatTime } from "@/utils/config.js";
export default {
  components: {
  },
  props: {
    // value: Object,
    // initData: Object,
    // visibleChoose: Boolean
  },
  watch: {
    // visibleChoose(val) {
    //   alert(2)
    // }
  },
  data() {
    return {
      // 数据库类型字典
      typeOptions: [
        {
          label: "数据源接口",
          value: 0
        },
        {
          label: "登录验证接口",
          value: 1
        }
      ],
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        }
        // {
        //   label: "删除",
        //   value: 0
        // }
      ],
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 10, // 1页显示多少条
        total: 0
      },
      // 搜索条件
      queryForm: {
        // interfaceType: 0
      },
      tableData: [],
      // 列表配置
      column: [
        {
          align: "center",
          name: "datasourceName",
          label: "数据源名称",
          showOverflowTooltip: true
        },
        {
          align: "center",
          name: "interfaceType",
          label: "数据源类型",
          handleGetName: (code) => {
            return getDiction(this.typeOptions, code);
          }
        },
        {
          align: "left",
          name: "interfaceUrl",
          label: "URL"
          // showOverflowTooltip: true
        },
        {
          align: "left",
          name: "datasourceDesc",
          label: "描述"
        },
        {
          align: "center",
          name: "status",
          label: "启用状态",
          width: 80,
          handleGetName: (code) => {
            return getDiction(this.statusOptions, code);
          }
        },
        {
          align: "center",
          name: "createDate",
          label: "创建时间"
        },
        {
          align: "center",
          label: "操作",
          // width: 240,
          buttons: [
            {
              label: "选择",
              type: "primary",
              plain: true,
              size: "mini",
              handelClick: (row) => {
                this.setEvent(row);
              }
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 列表操作
    searchEvent() {
      this.page.pageNo = 1;
      this.getSourceData();
    },
    getSourceData() {
      let obj = {
        ...this.page,
        ...this.queryForm
      };
      delete obj.total;
      if (obj.createTime) {
        obj.createTime = formatTime("yyyy-MM-dd", obj.createTime);
      }
      list(obj).then((res) => {
        let data = res.data;
        if (data.success) {
          this.tableData = data.data.list;
          this.page.total = data.data.total;
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    handlePageChange(page) {
      this.page = page;
      this.getSourceData();
    },
    setEvent(row) {
      // let obj = { value: row.id, name: row.datasourceName };
      // this.initData = obj;
      this.$emit("input", row);
      this.$emit("handelChoose", row);
      this.$emit("close");
    }

  },
  mounted() {
    this.getSourceData();
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/style/style.scss";
@import "../../../assets/style/variable.scss";
</style>

